<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <template>
        <el-page-header @back="goBack"  :content="travelDate+' '+trainNum+'次列车 座位情况'" >
        </el-page-header>
        <el-divider></el-divider>

        <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                ref="multipleTable"
                tooltip-effect="dark">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="coachNum"
                    label="车厢号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="seatRow"
                    label="座位排号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="seatCol"
                    label="座位列号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
            </el-table-column>

        </el-table>
    </template>
    <div class="block">
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage1"
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="totalCount"
        >
        </el-pagination>
    </div>

</div>
</body>

<script src="../../../js/axios-0.18.0.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    new Vue({
        el: '#app',
        mounted(){
            this.trainNum=localStorage.getItem("trainNumRoute");
            this.travelDate=localStorage.getItem("trainDate");
            this.select();
        },
        data() {
            return {
                //activeIndex: '1',
                //activeIndex2: '1',
                dialogFormVisible: false,
                dialogFormVisible1: false,
                pageSize : 15,
                currentPage1 : 1,
                totalCount : 40,
                travelDate: '',
                trainNum: 'G100',
                rules: {
                    trainNum: [
                        {
                            required: true,
                            message: '请选择列车编号',
                            trigger: ['change', 'blur']  // 同时监听change和blur事件
                        }
                    ],
                    dates: [
                        {
                            required: true,
                            type: 'array',
                            message: '请至少选择一个出发日期',
                            trigger: 'change',
                            validator: (rule, value, callback) => {
                                // 加强验证逻辑
                                if (!value || value.length === 0) {
                                    callback(new Error('请至少选择一个出发日期'));
                                } else {
                                    // 可选：检查每个日期是否有效
                                    const isValid = value.every(date => date instanceof Date);
                                    if (!isValid) {
                                        callback(new Error('包含无效日期'));
                                    } else {
                                        callback();
                                    }
                                }
                            }
                        }
                    ]
                },
                tableData: [{
                    id: '1',
                    travelDate: '2025/07/01',
                    trainNum: 'G100',
                    coachNum: '1车',
                    seatRow: '5',
                    seatCol: 2,
                    status: '00000'
                }, {
                    id: '2',
                    travelDate: '2025/07/01',
                    trainNum: 'G100',
                    coachNum: '1车',
                    seatRow: '5',
                    seatCol: 2,
                    status: '00000'
                }, {
                    id: '3',
                    travelDate: '2025/07/01',
                    trainNum: 'G100',
                    coachNum: '1车',
                    seatRow: '5',
                    seatCol: 2,
                    status: '00000'
                }, {
                    id: '4',
                    travelDate: '2025/07/01',
                    trainNum: 'G100',
                    coachNum: '1车',
                    seatRow: '5',
                    seatCol: 2,
                    status: '00000'
                }]
            }
        },
        methods: {
            selectAgain(){
                console.log(this.searchForm.date);
                this.currentPage1=1;
                this.select();
            },
            handleCurrentChange(val) {
                this.currentPage1=val;
                this.select();
            },
            select(){
                var _this=this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/dailySeat/select",
                    params: {
                        page: this.currentPage1,
                        trainNum: this.trainNum,
                        travelDate: this.travelDate
                    },
                }).then(function (resp) {
                    if(resp.data.code!==1){
                        _this.$message({
                            showClose: true,
                            message: '404接口错误！',
                            type: 'error'
                        });
                    }else{
                        _this.totalCount=resp.data.data.total;
                        _this.pageSize=resp.data.data.size;
                        _this.tableData=resp.data.data.records;
                        _this.tableData.forEach(item => {
                            item.seatCol = String.fromCharCode(64 + item.seatCol);
                        });
                    }

                })
            },
            goBack(){
                localStorage.clear();
                window.location.href='dailyTrain.html';
            }
        }
    })
</script>



</html>